<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扁平化设计、大气banner轮播插件 bannerShow.js</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/bannerShow.css">
    <script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="./js/bannerShow.min.js"></script>
    <style>
        .well2{
            background-color: #fff;
            border:0px;
            padding:19px;
            min-height: 20px;
            color:slategrey;
        }
    </style>
    <script>
        $(document).ready(function(){
            $(".bs-content").bannerShow({});
        });
    </script>
</head>

<body>
    <div class="container" style="margin-bottom:0px;">
        <div class="row">
            <div class="jumbotron">
                <h2><img src="" alt="" width="70px">
                    @ Postbird</h2>
                    <p><a href="mailto:ptbird@yeah.net" class="btn btn-primary btn-sm">email：ptbird@yeah.net ></a></p>
                    <p><a href="http://www.ptbird.cn" class="btn btn-success btn-sm">website：www.ptbird.cn  ></a></p>
                    <p><small>本页面采用 bootcss cdn服务的bootstrap&jquery，如页面显示不正常或jquery无反应，请确认网络连接正确。</small></p>
                    <p><small>POSTBIRD:There I am ,in the world more exciting!</small></p>
            </div>
            <div class="page-header">
                    <h1>扁平化设计、大气banner轮播插件 <small> bannerShow.js</small> </h1>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="">体验</h4>
                    </div>
                    <div class="panel-body">
                        <div class="well2">
                            <h5><font color="red"><strong>采用背景透明度方式控制图片的显示与隐藏，而不是简单的隐藏div</strong></font></h5>
                            <h5>摒弃常见插件冗杂庞大的弊端，采用fade显示，符合审美。压缩减少冗余代码，减轻代码请求。</h5>
                            <h5>可以设置全屏或container(bootstrap风格的图片轮播，代码非常少，可以快速复制应用。)</h5>
                            <h5>图片引自：<a href="http://www.ibiodiversity.net/desertbook/web/ "target="_blank">中国荒漠植物电子版网站：</a>（中科院上海辰山植物科研中心版权所有|auth: postbird）</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bs-content">
        <ul class="bs-box">
            <li style=" opacity: 1;filter:alpha(opacity=100);"><a href="" style="background:url(./img/1.jpg) center top no-repeat"></a></li>
            <li><a href="javascript:;" style="background:url(http://www.ibiodiversity.net/desertbook/web/img/3.jpg) center top no-repeat"></a></li>
            <li><a href="javascript:;" style="background:url(http://www.ibiodiversity.net/desertbook/web/img/2.jpg) center top no-repeat"></a></li>
            <li><a href="javascript:;" style="background:url(http://www.ibiodiversity.net/desertbook/web/img/1.jpg) center top no-repeat"></a></li>
        </ul>
    </div>
        <div class="container">
            <div class="row">
            <div class="col-md-12">
                <div class="page-header"><h2> 使用说明： </h2> </div>
                <h2><small>一、文件引入：</small></h2>
                <pre>
                    < link rel="stylesheet" href="./css/bannerShow.min.css" >
                    < script src="./js/bannerShow.min.js"></ script ></pre>

                <h2><small>二、文件说明：</small></h2>
                <div class="well2"> <h4>bannerShow.min.js和bannerShow.min.css为压缩文件 分别为1.48K 和 707字节</h4>
                    <h4>bannerShow.js和bannerShow.css为源代码文件文件，可直接复制使用。</h4>
                    <h4><small>为方便说明，bannerShow.css单独放在文件中，因代码行数非常短，可复制出来使用。</small></h4>
                    </div>
                <h2><small>三、插件使用：</small></h2>
                <h4><small>// 为方便显示，将html标签中间加上空格< h1></small></h4>
                <h4>html代码中,红色部分为应注意，其中<font color="red">bs-content</font>为整个轮播的容器,<font color="red">bs-box</font>为每张图片的容器</h4>
                <pre >
< div class="<font color="red">bs-content</font>">
    < ul class="<font color="red">bs-box</font>">
        < li style="<font color="red"> opacity: 1;filter:alpha(opacity=100);</font>">< a href="" style="background:url(./img/1.jpg) <font color="red">center top no-repeat</font>"></ a></ li>
        < li>< a href="javascript:;" style="background:url(./img/2.jpg) center top no-repeat"> < / a>< / li>
        < li>< a href="javascript:;" style="background:url(./img/3.jpg) center top no-repeat"> < / a>< / li>
        < li>< a href="javascript:;" style="background:url(./img/4.jpg) center top no-repeat"> < / a>< / li>
    < / ul>
< / div ></pre>
                <h4>CSS代码中控制容器的大小以及按钮等的大小和显示位置，默认高度为400px，可以通过css进行调整。</h4>
                <pre >
.bs-content{ width: 100%; min-width:1000px;clear: both; position: relative; height:400px;}
.bs-content img{ display: block; border:none;}
.bs-content ul,li{ list-style: none;}
.bs-box{ position: relative; width: 100%; height:400px; }
.bs-box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:400px; opacity: 0;filter:alpha(opacity=0);}
.bs-box li a{ display: block;width: 100%;  height: 100%;}
.bs-box li img{ width: 100%; height: 400px;}
/*圆点*/
.cir_box{ overflow: hidden; position: absolute; z-index: 100;}
.cir_box li{ float: left; width: 30px; height: 5px; margin:0 5px; cursor: pointer; background: #fff; opacity: 0.8;filter:alpha(opacity=80);}
.cir_on{ background: #000 !important;}
</pre>
            <h4>调用方式</h4>
            <pre>
< script >
    $(document).ready(function(){
       <font color="red"> $(".bs-content").bannerShow({});</font>
    });
< /script>
</pre>
            </div>
            <div class="col-md-12">
                <div class="page-header"><h2> 版权声明： </h2> </div>
                <h2><small>一、开放使用，您可以在此基础上按需求调整或将函数粘贴出以减少get请求数量。</small></h2>
                <h2><small>二、您可以在此基础上二次包装并再次进行发布。</small></h2>
            </div>
            <div class="col-md-12">
                <div class="page-header"><h2> JS源代码： </h2> </div>
               <pre>
/**
 ptbird
 www.ptbird.cn
 There I am , in the world more exciting!
 */
;
(function($) {
    $.fn.bannerShow = function(options) {
		return this.each(function() {
			var _lubo = jQuery('.bs-content');
			var _box = jQuery('.bs-box');
			var _this = jQuery(this);
			//
			var luboHei = _box.height();
			var Over = 'mouseover';
			var Out = 'mouseout';
			var Click = 'click';
			var Li = "li";
			var _cirBox = '.cir_box';
			var cirOn = 'cir_on';
			var _cirOn = '.cir_on';
			var cirlen = _box.children(Li).length;
			//圆点的数量  图片的数量
			var luboTime = 2000;
			//轮播时间
			var switchTime = 400;
			//图片切换时间
			cir();
			//根据图片的数量来生成圆点
			function cir() {
				_lubo.append('< ul class="cir_box">< /ul>');
				var cir_box = jQuery('.cir_box');
				for (var i = 0; i < cirlen; i++) {
					cir_box.append('< li style="" value="' + i + '">< /li>');
				}
				var cir_dss = cir_box.width();
				cir_box.css({
					left: '50%',
					marginLeft: -cir_dss / 2,
					bottom: '10%'
				});
				cir_box.children(Li).eq(0).addClass(cirOn);
			}
			//定时器
			int = setInterval(clock, luboTime);
			function clock() {
				var cir_box = jQuery(_cirBox);
				var onLen = jQuery(_cirOn).val();
				_box.children(Li).eq(onLen).stop(false, false).animate({
						opacity: 0
					},
					switchTime);
				if (onLen == cirlen - 1) {
					onLen = -1;
				}
				_box.children(Li).eq(onLen + 1).stop(false, false).animate({
						opacity: 1
					},
					switchTime);
				cir_box.children(Li).eq(onLen + 1).addClass(cirOn).siblings().removeClass(cirOn);
			}
			// 鼠标在图片上 关闭定时器
			_lubo.bind(Over,
				function() {
					clearTimeout(int);
				});
			_lubo.bind(Out,
				function() {
					int = setInterval(clock, luboTime);
				});
			//鼠标划过圆点 切换图片
			jQuery(_cirBox).children(Li).bind(Over,
				function() {
					var inde = jQuery(this).index();
					jQuery(this).addClass(cirOn).siblings().removeClass(cirOn);
					_box.children(Li).stop(false, false).animate({
							opacity: 0
						},
						switchTime);
					_box.children(Li).eq(inde).stop(false, false).animate({
							opacity: 1
						},
						switchTime);
				});
		});
	}
})(jQuery);
               </pre>
            </div>
            <div class="col-md-12">
                <div class="well text-center">
                    Powered by postbird . &copy;2016
                </div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function(){
        $('#gpsToDuBtn').click(function(){
            var str1=$('#gpsToDuInputId').val();
            $('#gpsToDuSpanId').text(gpsToDu(str1)[1]);
        });

        $('#duToDMSBtn').click(function(){
            var str1=$('#duToDMSInputId').val();
            var str2=$('#duToDMSSelectId').val();
            $('#duToDMSSpanId').text(duToGpsDMS(str1,str2));
        });

        $('#duToDMBtn').click(function(){
            var str1=$('#duToDMInputId').val();
            var str2=$('#duToDMSelectId').val();
            $('#duToDMSpanId').text(duToGpsDM(str1,str2));
        });

    });

//    var str1=" 39°55′44 ″ w";//d-m-s
//    var str2="39°55.733333333333′s";//d-m
//    var str3="-39.928888888888885 °";
//    var str3_1="w";
////    alert(gpsToDu(str2));
//    duToGpsDMS(str3,str3_1);
//    duToGpsDM(str3,str3_1);
</script>
</body>
</html>